import * as echarts from '../../../ec-canvas/echarts';

Page({
  data: {
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    },
    isLoaded: false,
    isDisposed: false
  },
  // 页面加载的时候 拿到 所有的桥的跨径-属性  当前桥的跨径-属性
  onLoad: function (options) {
    let indexInfo = JSON.parse(options.indexInfo);
    let currentIndexData = [[indexInfo.averageSpan, indexInfo.itemValue]];
    let mybridgeData = indexInfo.myBridgeIndexData;
    let otherBridgeData = indexInfo.otherBridgeIndexData;

    this.setData({
      title: indexInfo.title,
      itemTitle: indexInfo.itemTitle,
      itemUnit: indexInfo.itemUnit,
      description: indexInfo.description,
      structureName: indexInfo.structureName,
      bridgeWidth: indexInfo.bridgeWidth,
      spanExpression: indexInfo.spanExpression,
      currentIndexData: currentIndexData,
      mybridgeData: mybridgeData || [],
      otherBridgeData: otherBridgeData || []
    });
  },
  onReady: function () {
    // 获取组件
    this.ecComponent = this.selectComponent('#bridge-index-chart');
    let yAxisName = this.data.itemTitle + '(' + this.data.itemUnit + ')';
    let chart = this.initChart(yAxisName, this.data.currentIndexData, this.data.mybridgeData, this.data.otherBridgeData);
    
  },
  initChart: function (yAxisName, currentIndexData, mybridgeData, otherBridgeData) {
    this.ecComponent.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      
      this.setChartOption(chart, yAxisName, currentIndexData, mybridgeData, otherBridgeData);
      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;
      
      this.setData({
        isLoaded: true,
        isDisposed: false
      });

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  }, 
  setChartOption: function (chart, yAxisName, currentIndexData, myBridgeData, otherBridgeData) {

    let itemStyle = {
      normal: {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    };

    let  option = {
      backgroundColor: '#fff',
      color: [
        '#dd4444', '#fec42c', '#80F1BE'
      ],
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'cross'
        },
        backgroundColor: 'rgba(245, 245, 245, 0.8)',
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 10,
        textStyle: {
          color: '#000'
        },
        formatter: function (params) {
          return params.data[0] + ',' + params.data[1]
        },
        position: function (point, params, dom, rect, size) {
          // point: 鼠标
          return [point[0] - 30, point[1] + 20];
        }
      },
      legend: {
        left: 'center',
        data: ['当前桥', '我的', '其他'],
        textStyle: {
          color: '#000000',
          fontSize: 10
        }
      },
      grid: {
        left: 40,
        right: 20
      },
      xAxis: {
        type: 'value',
        name: '平均跨径(m)',
        nameLocation: 'center',
        nameGap: 30,
        nameTextStyle: {
          color: '#000000',
          fontSize: 9
        },
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        }
      },
      yAxis: {
        type: 'value',
        name: yAxisName,
        nameLocation: 'end',
        nameGap: 20,
        nameTextStyle: {
          color: '#000000',
          fontSize: 9
        },
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        }
      },
      dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0]
        },
        {
          type: 'inside',
          yAxisIndex: [0]
        }
      ],
      series: [
        {
          type: 'effectScatter',
          symbolSize: 20,
          name: '当前桥',
          itemStyle: itemStyle,
          data: currentIndexData
        },
        {
          name: '我的',
          type: 'scatter',
          symbolSize: 14,
          itemStyle: itemStyle,
          data: myBridgeData || []
        },
        {
          name: '其他',
          type: 'scatter',
          itemStyle: itemStyle,
          symbolSize: 14,
          data: otherBridgeData || []
        },
      ]
    };

    chart.setOption(option);
    return chart;
  },
  onUnload: function() {
    this.dispose();
  },
  dispose: function () {
    if (this.chart) {
      this.chart.dispose();
    }
    this.setData({
      isDisposed: true
    });
  }
});


